/**
 * 编辑公司的简介
 *      用户名
 *      公司名
 *      地址
 *      联系电话
 *      官方网址
 *      企业邮箱
 *
 *      介绍
 */

import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import {MineImg} from '../../images/index';
import {_updataPicture, editCompany} from '../../api/mine';
import {setToastMsg, setHomeData} from '../../actions/index';
import {connect} from 'react-redux';

const {width} = Dimensions.get('window');

class EditCompanyIntroduction extends Component {
  constructor(props) {
    super(props);
    const result = this.props.navigation.getParam('originData');
    this.state = {
      nickname: result.nickname,
      picture: result.picture,
      address: result.address,
      phone: result.phone,
      connector: result.connector,
      description: result.description,
      provide: result.provide,
      need: result.need,
      company: result.company,
      portraitkey: result.portraitkey,
    };
  }
  async updatePic() {
    let param2 = {
      files: {
        uri: 'file://' + this.state.portraitkey,
        type: 'multipart/form-data',
        name: this.state.portraitkey.substr(
          this.state.portraitkey.lastIndexOf('/') + 1,
        ),
      },
    };
    let result = await _updataPicture(param2);
    //todo 得改成上传成功

    if (result.error_code === '0' || result.error_code === 0) {
      this.props.setToastMsg('上传成功!');
      this.props.setHomeData({
        img: this.state.portraitkey,
      });
    } else {
      this.props.setToastMsg('上传失败!');
    }
  }
  selectPic() {
    ImagePicker.openPicker({multiple: false}).then(image => {
      this.setState({
        portraitkey: image.path,
      });
    });
    this.updatePic();
  }
  async updateInfo() {
    let param = {
      nickname: this.state.nickname,
      company: this.state.company,
      description: this.state.description,
      address: this.state.address,
      provide: this.state.provide,
      need: this.state.need,
      phone: this.state.phone,
      // portraitkey: this.state.portraitkey,
    };
    let result = await editCompany(param);
    if (result.error_code === '0' || result.error_code === 0) {
      this.props.setToastMsg('修改成功！');
      this.props.navigation.state.params.callback(this.state);
      this.props.navigation.navigate('CompanyInfo');
    } else {
      this.props.setToastMsg('修改失败！');
    }
  }
  render() {
    return (
      <ScrollView style={{backgroundColor: '#ffffff'}}>
        <View style={styles.imgContainer}>
          <Image style={styles.img} source={MineImg.Backround} />
          <TouchableOpacity
            onPress={() => this.selectPic()}
            style={styles.insideImg}>
            <Image
              source={{uri: this.state.portraitkey}}
              style={{width: 70, height: 70, borderRadius: 35}}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.container}>
          <Text style={styles.textDesc}>用户名</Text>
          <TextInput
            placeholder={'输入公司名称'}
            style={styles.inputText}
            value={this.state.nickname}
            onChangeText={text => {
              this.setState({nickname: text});
            }}
          />
        </View>
        <View style={styles.textMid}>
          <View style={styles.container}>
            <Text style={styles.textDesc}>公司名称</Text>
            <TextInput
              placeholder={'输入公司名称'}
              style={styles.inputText}
              value={this.state.company}
              onChangeText={text => {
                this.setState({
                  company: text,
                });
              }}
            />
          </View>
          <View style={styles.container}>
            <Text style={styles.textDesc}>地址</Text>
            <TextInput
              placeholder={'输入公司地址'}
              style={styles.inputText}
              value={this.state.address}
              onChangeText={text => {
                this.setState({
                  address: text,
                });
              }}
            />
          </View>
          <View style={styles.container}>
            <Text style={styles.textDesc}>联系电话</Text>
            <TextInput
              placeholder={'输入联系电话'}
              style={styles.inputText}
              value={this.state.phone}
              onChangeText={text => {
                this.setState({
                  phone: text,
                });
              }}
            />
          </View>
        </View>
        <View style={styles.textBottom}>
          <TextInput
            placeholder={'填写介绍(300字以内)'}
            multiline={true}
            value={this.state.description}
            onChangeText={text => {
              this.setState({
                description: text,
              });
            }}
          />
        </View>
        <View style={styles.textBottom}>
          <TextInput
            placeholder={'填写供应商品介绍'}
            multiline={true}
            value={this.state.provide}
            onChangeText={text => {
              this.setState({
                provide: text,
              });
            }}
          />
        </View>
        <View style={styles.textBottom}>
          <TextInput
            placeholder={'填写产品需求介绍'}
            multiline={true}
            value={this.state.need}
            onChangeText={text => {
              this.setState({
                need: text,
              });
            }}
          />
        </View>
        <View style={styles.submitButton}>
          <Button
            title={'提  交'}
            onPress={() => {
              this.updateInfo();
            }}
          />
        </View>
      </ScrollView>
    );
  }
}
export default connect(
  state => ({
    img: state.home.img,
  }),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
    setHomeData: data => dispatch(setHomeData(data)),
  }),
);
const styles = StyleSheet.create({
  textTop: {
    marginTop: 20,
  },
  textMid: {
    marginTop: 20,
  },
  textBottom: {
    marginTop: 30,
    width: 375 - 40,
    height: 200,
    marginLeft: 20,
    backgroundColor: '#F8F6F9',
    textAlignVertical: 'top',
    borderRadius: 5,
  },
  submitButton: {
    width: 375 - 40,
    marginLeft: 20,
    marginTop: 40,
    marginBottom: 80,
  },
  container: {
    width: 375 - 40,
    height: 40,
    backgroundColor: '#F8F6F9',
    marginTop: 10,
    marginLeft: 20,
    flexDirection: 'row',
  },
  textDesc: {
    width: 80,
    color: '#656565',
    marginLeft: 20,
    marginTop: 10,
    fontSize: 15,
  },
  inputText: {
    width: (375 - 40) / 2,
    backgroundColor: '#F8F6F9',
    marginLeft: 50,
  },
  imgContainer: {
    height: 230,
  },
  img: {
    width: 375,
    height: 230,
    alignItems: 'center',
  },
  insideImg: {
    width: 70,
    height: 70,
    marginTop: -150,
    marginLeft: 375 / 2 - 35,
    borderRadius: 35,
  },
});
